<template>
  <div class="weui-flex saleman">
    <div class="weui-flex__item" @touchstart="handleGoToMerchant">
      <div class="container">
        <h3>商户入驻</h3>
        <p>一键录入商户信息</p>
        <svg-icon class="merchant" icon-class="shiliangzhinengduixiang" width="135px" height="110px"></svg-icon>
      </div>
    </div>
    <div class="weui-flex__item" @touchstart="handleGoToMerchantAdmin">
      <div class="container">
        <h3>商户管理</h3>
        <p>商户资料快速查看编辑</p>
        <svg-icon class="merchant" icon-class="shiliangzhinengduixiang_fuzhi-" width="135px" height="110px"></svg-icon>
      </div>
    </div>
    <div>
      <button class="weui-btn weui-btn_warn" @click="handleLogoOut">退出登录</button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleGoToMerchant() {
      this.$router.push({ name: 'qrCode' })
    },
    handleGoToMerchantAdmin() {
      this.$router.push({ name: 'merchant' })
    },
    handleLogoOut() {
      this.$store.dispatch('FedLogOut').then(() => {
        this.$router.push({ name: 'login' })
      })
    }
  }
}
</script>


<style lang="scss" scoped>
  @import '../../styles/index.scss';

  .saleman {
    position: relative;
    padding: px2rem(70px) px2rem(30px) 0 px2rem(30px);
    .container {
      text-align: center;
      width: px2rem(300px);
      height: px2rem(360px);
      margin: 0 auto;
    }
    .weui-flex__item {
      background:rgba(255,255,255,1);
      border-radius: 4px;
      box-shadow: 0px 0px px2rem(15px) rgba(188,188,188,0.3);
      margin-right: px2rem(50px);
      padding-top: px2rem(20px);
      &:last-child {
        margin-right: 0;
      }
    }
    .weui-btn {
      position: fixed;
      bottom: 10px;
      left: 0;
      right: 0;
    }
    @media (max-width: 200px) {
      .weui-btn {
        display: none;
      }
    }
  }
</style>
